<template>
  <div>
    <div class="tabText">订单管理</div>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"> 全部</span>
        <!-- 搜索框开始位置 -->
        <div class="searchTab">
          <span>输入搜索</span>
          <el-input placeholder="输入用户微信查询" v-model="input" clearable>
          </el-input>
        </div>

        <!-- 搜索框结束位置 -->

        <!-- 时间组件开始位置 -->
        <div class="block">
          <span class="demonstration"> 上次消费时间 </span>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <!-- 时间组件结束位置 -->
        <!-- 两个按钮开始位置 -->
        <div>
          <el-button type="primary" @click="searchOrder">查询</el-button>
          <el-button plain>重置</el-button>
        </div>

        <!-- 两个按钮结束位置 -->
      </el-tab-pane>
      <el-tab-pane label="待支付" @click="changeFlag">待支付</el-tab-pane>
      <el-tab-pane label="已关闭">已关闭</el-tab-pane>
      <el-tab-pane label="待确认">待确认</el-tab-pane>
      <el-tab-pane label="学习中">学习中</el-tab-pane>
      <el-tab-pane label="已完成">已完成</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      flag: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  updated() {
    console.log(this.input);
  },
  methods: {
    // searchOrder() {
    //   searchOrderAPI({ input: this.input, value2: this.value2 }).then((res) => {
    //     if (res.code == 200) {
    //       this.$emit("searchReq", res);
    //     }
    //   });
    // },
    searchOrder() {
      this.$emit("searchParent", { input: this.input, value2: this.value2 });
    },
    changeFlag() {
      console.log("1");
      this.flag = 1;
      this.searchOrder();
      this.$emit("parent", this.flag);
    },
  },
};
</script>

<style lang="less" scoped>
.tabText {
  border-left: 8px solid blue;
  font-size: 24px;
  font-weight: 600;
  padding-left: 10px;
  margin-bottom: 20px;
}
.searchTab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  > span {
    width: 100px;
  }
  .el-input__inner {
    margin-left: 10px;
  }
}
.block {
  width: 500px;
  display: flex;
  margin-left: 30px;
  align-items: center;
  .el-date-editor {
    margin-left: 10px;
  }
}
.el-tab-pane {
  display: flex;
}
.el-tabs--top {
  height: 150px;
  margin-bottom: 20px;
}
</style>
